<template>
  <div class="absolute z-20" :style="position">
    <img :src="getImageUrl('keeper.png')" alt="" />
  </div>
</template>

<script setup>
import { getImageUrl } from '@/utils/index'
import { usePosition } from '@/composables/usePosition'
import { usePlayerStore } from '@/store/player'
import { storeToRefs } from 'pinia'
import { onMounted, onUnmounted } from 'vue'
import { useGameStore } from '@/store/game'
const { player } = storeToRefs(usePlayerStore())
const { moveUp, moveDown, moveRight, moveLeft } = usePlayerStore()
const { detectionGameCompleted } = useGameStore()
const position = usePosition(player)

onMounted(() => {
  window.addEventListener('keyup', handleKey)
})
onUnmounted(() => {
  window.removeEventListener('keyup', handleKey)
})

/**
 *
 * @param {Event} e
 * 监听鼠标按下事件执行对应操作
 */
function handleKey(e) {
  switch (e.code) {
    case 'ArrowLeft':
      moveLeft()
      break
    case 'ArrowRight':
      moveRight()
      break
    case 'ArrowUp':
      moveUp()
      break
    case 'ArrowDown':
      moveDown()
      break
  }
  detectionGameCompleted()
}
</script>

<style lang="scss" scoped></style>
